<template>
	<div class="container">
		<div class="ico-table">
			<div class="table-content">
				<table class="layui-hide" lay-data="{id: 'idTest'}" id="test"></table>
				<div class="remindaer-box">
					<span>*</span> 此列表的默认顺序为：优先显示有评级报告的项目,再按市值从大到小排序
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	export default{
		
		mounted:function(){
			let me = this;
			layui.use('table', function() {
				var table = layui.table;
				
				table.render({
					elem: '#test',
					url: '//api.imrating.com/api/reports/?layui=1',
					cellMinWidth: 80,
					skin: 'line',
					loading:false,
					cols: [
						[
							{
								field: 'name',
								width: '20%',
								title: '项目名称',
								sort: true,
								align: 'center',
								templet:`<div><div class="product-name">
											<img src="{{d.icon_url}}" class="table-img-box">
											<h3 class="tbale-h3">{{d.symbol}}</h3>
											<h5 class="tbale-h4">{{d.name}}</h5>
										  </div></div>`
							}, 
							{
								field: 'rating',
								width: '5.2%',
								title: '评分',
								sort: true,
								align: 'center',
								templet: `<div> <div class="rateResult-box">{{d.rating}}</div></div>`
							}, 
							{
								field: 'team_score',
								width: '10%',
								title: '团队',
								sort: true,
								align: 'center',
								templet: `<div>
											<div class="progress">
												<div class="progress-bar bg-warning" style="width:{{d.scores.team_score}}%"></div>
											</div>
										</div>`
							}, 
							{
								field: 'op_score',
								width: '10%',
								sort: true,
								title: '运营',
								align: 'center',
								templet: `<div>
											<div class="progress">
												<div class="progress-bar bg-warning" style="width:{{d.scores.op_score}}%"></div>
											</div>
										</div>`
							}, 
							{
								field: 'code_score',
								width: '10%',
								sort: true,
								title: '代码',
								align: 'center',
								templet: `<div>
											<div class="progress">
												<div class="progress-bar bg-warning" style="width:{{d.scores.code_score}}%"></div>
											</div>
										</div>`
							}, 
							{
								field: 'market_score',
								width: '10%',
								title: '市场',
								sort: true,
								align: 'center',
								templet: `<div>
											<div class="progress">
												<div class="progress-bar bg-warning" style="width:{{d.scores.market_score}}%"></div>
											</div>
										</div>`
							}, 
							{
								field: 'risk_score',
								width: '10%',
								title: '风险',
								sort: true,
								align: 'center',
								templet: `<div>
											<div class="progress">
												<div class="progress-bar bg-warning" style="width:{{d.scores.risk_score}}%"></div>
											</div>
										</div>`
							}, 
							{
								field: 'project_score',
								width: '10%',
								title: '项目',
								sort: true,
								align: 'center',
								templet: `<div>
											<div class="progress">
												<div class="progress-bar bg-warning" style="width:{{d.scores.project_score}}%"></div>
											</div>
										</div>`
							}, 
							{
								field: 'score',
								width: '15%',
								title: '阅读报告',
								align: 'center',
								templet: function(e){
									if(e.scores.has_published){
										return `<a href="#/ico/`+e.symbol+`" class="redaRatingRe">阅读报告</a> `
									}else{
										return '暂未评级';
									}
								}
							  }
						]
					],
					page: {
						layout: ['prev', 'page', 'next'],
						groups: 5 //只显示 1 个连续页码,
							,
						first: false //不显示首页
							,
						last: false //不显示尾页
					}
				})
				
			});
			
			
		}
	}
</script>

<style scoped="scoped">
	.ico-table{
		margin: 60px 0 80px 0;
		width: 100%;
		position: relative;
		overflow: hidden;
		background-color: #FFFFFF;
		border-radius: 4px;
		-moz-box-shadow:0px 0px 6px #1285db60; 
		-webkit-box-shadow:0px 0px 6px #1285db60; 
		box-shadow:0px 0px 6px #1285db60;
	}
	.table-content{
		width: 100%;
		position: relative;
		overflow: hidden;
	}
	.remindaer-box {
	    position: absolute;
	    bottom: 100px;
		left: 30px;
	    font-size: 12px;
	    color: #8e8e8e;
	}
	.remindaer-box span {
		font-size: 14px;
	    color: #ff0505;
	    margin-right: 5px;
	}
</style>